<template>
    <div class="e-content" :id="id"></div>
</template>

<script>
export default {
    props:{
        id:{
            type: String
        },
        data:{
            type: Object
        }
    },
    data() {
        return {

        }
    },
    methods:{
        draw() {
            let draw = this.$echarts.init(document.getElementById(this.id))
            let option = {
                backgroundColor: 'rgba(192, 192, 192, .1)',
                title:{
                    text: this.data.name,
                    textStyle:{
                        color: '#405580',
                        fontSize: '16',
                    },
                    top:10,
                    left: 5
                },
                grid: {
                    top: '20%',
                    right: '22px',
                    left: '33px',
                    bottom: '15%'
                },
                xAxis: [{
                    type: 'category',
                    data: this.data.xdata,
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(207, 215, 229, 1)'
                        }
                    },
                    axisLabel: {
                        margin: 10,
                        color: 'rgba(71, 92, 123, 1)',
                        textStyle: {
                            fontSize: 12
                        },
                    },
                    axisTick: {
                        show: false
                    }
                }],
                yAxis: [{
                    axisLabel: {
                        formatter: '{value}',
                        color: 'rgba(71, 92, 123, 1)',
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(207, 215, 229, 1)'
                        }
                    },
                    splitLine: {
                        show:false
                    }
                }],
                series: [{
                    type: 'bar',
                    data: this.data.ydata,
                    barWidth: '16px',
                    itemStyle: {
                        normal: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: 'rgba(0, 97, 255, 1)' // 0% 处的颜色
                            }, {
                                offset: 1,
                                color: 'rgba(225,225,225,0)' // 100% 处的颜色
                            }], false),
                        }
                    },
                    label: {
                        normal: {
                            show: false
                        }
                    }
                }]
            };
            draw.setOption(option)
        }
    },
    mounted(){
        this.draw()
    }
}
</script>

<style lang="less" scoped>
.e-content{
    width: 100%;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
}
</style>